<template>
	<view class="goods-detaila">
		<!-- 轮播图区域 -->
		<swiper indicator-dots autoplay interval="2000" duration="1000" circular>
			<swiper-item>
				<image src="../../static/12.png" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/滚出.png" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image src="http://image3.suning.cn/uimg/b2c/newcatentries/0070073390-000000000102397326_1_800x800.jpg" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- info区域 -->
		<view class="info">
			<view class="title">佳能（Canon） EOS 700D 单反套机</view>
			<view class="main">
				<view class="price"><text>市场价：</text>
					<text>￥5099</text>
					<text>销售价：</text>
					<text>￥4799</text></view>
				<view class="total">购买数量 <button>-</button><text>2</text><button>+</button></view>
				<view class="goto">
					<button type="default">立即购买</button><button type="default">加入购物车</button>
				</view>
			</view>
		</view>
		<!-- 参数区域 -->
		<view class="params">
			<view class="top">商品参数</view>
			<view class="content">
				<view>商品货号：SD8861076806</view>
				<view>库存情况：100件</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.goods-detaila {
		background-color: #EEEEEE;
		padding: 15rpx;

		swiper {
			// margin: 15rpx;
			width: 750rpx;
			height: 500rpx;

			swiper-item {

				// width: 100%;
				// height: 700rpx;
				image {
					width: 95%;
					height: 100%;
				}
			}
		}

		.info {
			background-color: #FFFFFF;
			// background-color: pink;
			width: 100%;
			height: 400rpx;

			.title {
				font-size: 38rpx;
				height: 80rpx;
				line-height: 80rpx;
				// padding: l/;
				padding-left: 20rpx;
				border-bottom: 1px solid #ccc;
			}

			.main {
				.price {
					// margin-top: 20rpx;
					font-size: 25rpx;
					padding-top: 20rpx;
					padding-left: 15rpx;

					// font-size: 30rpx;
					text:nth-child(2) {
						color: #ccc;
						text-decoration: line-through;
					}

					text:nth-child(3) {
						margin-left: 15rpx;
					}

					text:nth-child(4) {
						color: #EB4450;
					}
				}

				.total {
					margin-top: 20rpx;
					padding-left: 18rpx;
					font-size: 30rpx;
					display: flex;

					button {
						margin: 0;
						text-align: center;
						line-height: 60rpx;
						width: 60rpx;
						height: 60rpx;

					}

					text {
						border: 1px solid #EEEEEE;
						width: 50rpx;
						font-size: 35rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						background-color: #F8F8F8;
					}
				}

				.goto {
					display: flex;
					padding-top: 20rpx;
					padding-left: 20rpx;

					button {
						color: #FFFFFF;
						background-color: #EB4450;
						margin: 0;

						font-size: 30rpx;
						width: 200rpx;
						// 500rpx
						// width: 120rpx;
						height: 80rpx;
					}
				}
			}
		}

		.params {
			width: 100%;
			margin-top: 12rpx;
			height: 100vh;
			background-color: #FFFFFF;
			// background-color: pink;

			// margin: 0 auto;
			// margin-left: ;
			// background-color: #FFFFFF;
			.top {
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				padding-left: 20rpx;
				border-bottom: 1px solid #ccc;
			}

			.content {
				// line-height: 10rpx;
				padding-left: 20rpx;
				color: #ccc;
				font-size: 30rpx;

				view {
					margin-top: 20rpx;
				}

				// view:nth-child()
			}
		}
	}
</style>
